<template>
  <div>
    <el-col>
      <el-form-item :label="$t('public.type')" class="el-form-label">
        <el-select :disabled="!isAdd" v-model="formatType" :placeholder="$t('public.pleasePick')" @change="changeType">
          <el-option
            v-for="(item, index) in options"
            :key="index"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col v-if="formatType === 'checkbox' || formatType === 'radio'">
      <el-col v-for="(item, index) in formdata.formdataChoices" :key="item.key" style="margin-bottom: 5px">
        <el-col style="width: 194px;margin-left:75px"><el-input v-model.trim="formdata.formdataChoices[index].value" size="mini" class=""></el-input></el-col>
        <el-col class="option-btn" v-if="index === 0"><span class=""><i class="el-icon-plus el-icon--right green-color" @click="addOptions(formdata.formdataChoices.length)"></i></span></el-col>
        <el-col class="option-btn" v-if="index !== 0"><span class=""><i class="iconfont icon-zuixiaohua el-icon--right colorred" @click="delOptions(index)"></i></span></el-col>
      </el-col>
    </el-col>
    <el-col v-if="formatType === 'dropdown'">
    <el-form-item :label="$t('configLazyLoad.customerConfig.enableDict')" class="el-form-label">
        <el-radio-group @change="getDicMapOptions" v-model="formdata.dic.isDic">
          <el-radio :label="true" :disabled="isAdd === false">{{$t('public.yes')}}</el-radio>
          <el-radio :label="false" :disabled="isAdd === false">{{$t('public.no')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <div v-show="!formdata.dic.isDic">
        <el-col v-for="(item, index) in formdata.formdataChoices" :key="item.key" style="margin-bottom: 5px">
          <el-col style="width: 194px;margin-left:75px"><el-input v-model.trim="formdata.formdataChoices[index].value" size="mini" :key="item.key" class=""></el-input></el-col>
          <el-col class="option-btn" v-if="index === 0"><span class=""><i class="el-icon-plus el-icon--right green-color" @click="addOptions(formdata.formdataChoices.length)"></i></span></el-col>
          <el-col class="option-btn" v-if="index !== 0"><span class=""><i class="iconfont icon-zuixiaohua el-icon--right colorred" @click="delOptions(index)"></i></span></el-col>
        </el-col>
      </div>
      <div v-show="formdata.dic.isDic">
        <el-form-item :label="$t('configLazyLoad.customerConfig.relDict')" class="el-form-label">
          <el-select v-model="formdata.dic.dicId" filterable :placeholder="$t('public.pleasePick')" @change="changeRequireOption">
            <el-option
              v-for="(item, index) in disMapOptions"
              :key="index"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <div class="tip">
            {{$t('configLazyLoad.customerConfig.tip5')}}
          </div>
        </el-form-item>
        <el-form-item :label="$t('configLazyLoad.customerConfig.dictRequire')" class="el-form-label" v-show="isRequire === 'required'">
          <el-select v-model="formdata.mustFill" filterable :placeholder="$t('public.pleasePick')">
            <el-option :label="item.label" :value="item.value" v-for="item in mustFillList"></el-option>
          </el-select>
        </el-form-item>
      </div>

    </el-col>
  </div>
</template>
<script>
  import Vue from 'vue'
  export default {
    name: 'CustomFieldsType',
    data () {
      return {
        options: [{
          value: 'date',
          label: this.$t('config.customer.date')
        }, {
          value: 'datetime',
          label: this.$t('configLazyLoad.customerConfig.dateTime')
        }, {
          value: 'single',
          label: this.$t('config.customer.singleLineText')
        }, {
          value: 'dropdown',
          label: this.$t('config.customer.dropDownBox')
        }, {
          value: 'checkbox',
          label: this.$t('configLazyLoad.customerConfig.multiBox')
        }, {
          value: 'number',
          label: this.$t('config.customer.number')
        }, {
          value: 'multi',
          label: this.$t('config.customer.multiLineText')
        }, {
          value: 'radio',
          label: this.$t('config.customer.singleBox')
        }],
        isOption: false,
        formatType: '',
        mustFillList: [],
        disMapOptions: [],
        dicMap: '',
        formdataChoices: []
      }
    },
    props: {
      isRequire: String,
      isAdd: Boolean,
      formdata: Object,
      email: {
        type: Object,
        default: function () {
          return {
            isShow: true,
            lastCodeKey: '',
            form: null
          }
        }
      }
    },
    watch: {
      formdata: {
        handler () {
          this.formatType = this.formdata.type
          if (this.formdata.dic && this.formdata.dic.isDic) {
            this.changeType()
          }
          this.formdataChoices = this.formdata.formdataChoices
        },
        immediate: true
      }
    },
    methods: {
      changeType (isReset) {
        this.formdata.formdataChoices = [{key: 0, value: ''}]
//        this.isOption = !this.formatType !== 'dropdown'
        if (isReset) {
          this.$set(this.formdata, 'mustFill', 'all')
        }
        if (this.formatType === 'dropdown' && this.formdata.dic && this.formdata.dic.isDic) {
          this.handleDic()
        }
        this.$emit('customizeFieldType', {type: this.formatType, flag: false})
      },
      handleDic () {
        this.$store.dispatch('getCache', {type: 'options'})
          .then(() => {
            let options = this.$getCache('options') || []
            this.mustFillList = []
            this.disMapOptions = []
            let arr = [{label: this.$t('configLazyLoad.customerConfig.allRequired'), value: 'all'}]
            for (let i = 0; i < options.length; i++) {
              if (this.formdata.dic.dicId === options[i]._id) {
                for (let k = 1; k < options[i].cascade; k++) {
                  arr.push({label: k + this.$t('configLazyLoad.customerConfig.levelRequired'), value: k + ''})
                }
                this.mustFillList = arr
              }
              this.disMapOptions.push({
                cascade: options[i].cascade,
                label: options[i].name,
                value: options[i]._id
              })
            }
            if (!this.formdata.dic.dicId) {
              for (let i = 1; i < options[0].cascade; i++) {
                arr.push({label: i + this.$t('configLazyLoad.customerConfig.levelRequired'), value: i + ''})
              }
              this.mustFillList = arr
            }
            this.$set(this.formdata.dic, 'dicId', this.formdata.dic.dicId || options[0]._id)
            this.$set(this.formdata, 'mustFill', this.formdata.mustFill || 'all')
          })
      },
      changeRequireOption () {
        this.$set(this.formdata, 'mustFill', 'all')
        this.handleDic()
      },
      // 当编辑自定义字段时 为是 初始化options
      getDicMapOptions (val) {
        if (val) {
          this.changeType()
        }
      },
      addOptions (index) {
        Vue.set(this.formdata.formdataChoices, index, {key: (parseInt(this.formdata.formdataChoices[this.formdata.formdataChoices.length - 1].key) + 1) + '', value: ''})
      },
      delOptions (index) {
        this.formdata.formdataChoices.splice(index, 1)
      }
    },
    beforeMount () {
//      this.formatType = this.formdata.type
//      if (this.formdata.dic && this.formdata.dic.isDic) {
//        this.changeType()
//      }
//      this.formdataChoices = this.formdata.formdataChoices
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .green-color
    color $c-main
    cursor pointer
  .colorred
    color $c-pink
    cursor pointer
  .option-btn
    width: 20px;
    margin-top: 7px;
    font-size: 16px;
    margin-left: 5px;
  .tip
    color $c-prompt
    font-size 12px
</style>
